<template>
  <div class="header-notice">

    <el-badge :value="noticeNum" :hidden="noticeNum == 0" :max="99" class="item">
      <i class="el-icon-bell"></i>
    </el-badge>

    <div class="notice-menu" v-if="noticeNum > 0">
      <div class="notice-menu-row" v-for="item of waitAffairListTop3" :key="item.viewFlowId">
        <span class="title">{{parseTime(item.updateTime,'{y}-{m}-{d}') }} 您有1个面试</span><span class="name">（{{item.affairTitle}}）</span>
        <div class="open" @click="clickFn(item.viewFlowId)" >请点击查看</div>
      </div>
      <div class="notice-open" v-if="noticeNum > 3">
        <span @click="clickFn()">查看更多</span>
      </div>
    </div>
  </div>
</template>

<script>
  import { apiWaitAffairList } from '../../api/pmp/api.recruit.js';
  // import Fuse from 'fuse.js';
  // import path from 'path';

  export default {
    name: 'noticeC',
    data() {
      return {
        noticeNum: '',
        waitAffairList: [],
        waitAffairListTop3: [],
        timer:undefined
      };
    },
    created() {
      console.log('清空');
      this.getWaitAffairListFn();
    },
    destroyed(){
      clearTimeout(this.timer);
    },
    methods: {
      getWaitAffairListFn() {
        this.timer = setInterval(()=>{
          apiWaitAffairList().then(res => {
            this.waitAffairListTop3 = (res.rows || []).slice(0,3);
            this.waitAffairList = res.rows;
            this.noticeNum = (res.rows || []).length +'';
          });
        },3000);
      },
      clickFn(flowId) {
        this.$router.push({ name:'Recruit' });
        if(flowId){
          this.$store.dispatch('getFlowId', {
            flowId: flowId
          });
          console.log('存入',flowId);
        }
      }
    }
  };
</script>

<style lang="scss" scoped>
.header-notice {
  position: relative;
  font-size: 0 !important;
  .item {
    margin-top: 10px;
    // margin-right: 10px;
    i{
      font-size: 24px;
    }
  }
  &:hover{

    .notice-menu{
      display: block;
    }
  }
  .notice-menu{
    display: none;
    position: fixed;
    top:50px;
    right: 50px;
    padding: 5px 0;
    width: 304px;
    height: auto;
    background:rgba(255,255,255,1);
    box-shadow:0px 2px 8px 0px rgba(0,0,0,0.1);
    border:1px solid rgba(232,232,232,1);
    border-radius: 4px;
    z-index: 1000;
    &::before{
      display: block;
      position:absolute;
      content: '';
      width: 0px;
      height: 0px;
      top:-16px;
      left: 120px;
      border: 8px solid transparent;
      border-bottom: 8px solid #fff;
    }
    .notice-menu-row{
      margin: 0px auto;
      padding: 10px 0px;
      width: 248px;
      // height: 59px;
      font-size:14px;
      font-family:PingFangSC-Regular,PingFang SC;
      font-weight:400;
      color:rgba(51,51,51,1);
      line-height:20px;
      border-bottom:1px solid #E8E8E8;
      .title{
        position: relative;
        &::after{
          display: block;
          position:absolute;
          content: '';
          width: 6px;
          height: 6px;
          border-radius: 50%;
          top: 7px;
          left: -15px;
          background: #2689FF;
        }
      }
      .name{
        font-size:14px;
        font-family:PingFangSC-Regular,PingFang SC;
        font-weight:400;
        color:rgba(38,137,255,1);
        line-height:20px;
      }
      .open{
        cursor: pointer;
      }
    }
    .notice-open{
      position: relative;
      width: auto;
      height: 43px;
      span{
        position: absolute;
        right: 26px;
        bottom: 4px;
        font-size:14px;
        font-family:PingFangSC-Regular,PingFang SC;
        font-weight:400;
        color:rgba(153,153,153,1);
        line-height:20px;
        cursor: pointer;
      }
    }
  }

  &.show {
    .header-search-select {
      width: 210px;
      margin-left: 10px;
    }
  }
}
</style>
